"use client"
import dayjs from 'dayjs'
import { useState } from 'react'
import CalendarSvg from 'public/icons/user/calendar.svg'
import styles from './NumberPad.module.scss'
import { DatePicker, Button, Toast } from 'antd-mobile'
export default function NumberPad(props: {
  submit: (value: Record<string, any>) => Promise<boolean | undefined>
}) {
  const [padForm,setPadForm] = useState({
    amount: '0',
    date: dayjs().format('YYYY-MM-DD')
  })
  const defaultDate = new Date()
  const [showCalendar, setShowCalendar] = useState(false)
  const handleDateConfirm = (val: PickerDate) => {
    setPadForm(prev => ({...prev, date: dayjs(val).format('YYYY-MM-DD')}))
    setShowCalendar(false)
  }
  
  const handleBtnNum = (value: string) => {
    const aLen = padForm.amount.length
    if (aLen >= 7) return
    const dotIndex = padForm.amount.indexOf('.')
    if (dotIndex >= 0 && aLen - dotIndex > 2) return
    if (value === '.' && dotIndex >= 0) return
    if (value === '0' && padForm.amount === '0') return
    if (value !== '0' && value !== '.' && padForm.amount === '0') {
      padForm.amount = ''
      setPadForm(prev => ({...prev,amount: value}))
      return
    }
    setPadForm(prev => ({...prev,amount: prev.amount + value}))
  }
  const handleBtnDel = () => {
    const aLen = padForm.amount.length
    if (aLen === 1) {
      setPadForm(prev => ({...prev,amount: '0'}))
    } else {
      setPadForm(prev => ({...prev,amount: prev.amount.slice(0, aLen - 1)}))
    }
  }
  const handleSubmit = async () => {
    const amount = padForm.amount.split('').filter((item: string) => item !== '.')
    const isZero = amount.every((item: string) => item === '0')
    if (isZero) {
      Toast.show({ icon: 'fail', content: '金额不能为零', })
      return
    }
    const result = await props.submit({
      happen_at: new Date(padForm.date),
      amount: +padForm.amount * 100
    })
    result && reset()
  }
  const reset = () => {
    setPadForm(prev => ({...prev,amount: '0'}))
  }
  const buttons= [
    {text: '1', onClick:()=>{handleBtnNum('1')}, color: 'default'},
    {text: '2', onClick:()=>{handleBtnNum('2')}, color: 'default'},
    {text: '3', onClick:()=>{handleBtnNum('3')}, color: 'default'},
    {text: '4', onClick:()=>{handleBtnNum('4')}, color: 'default'},
    {text: '5', onClick:()=>{handleBtnNum('5')}, color: 'default'},
    {text: '6', onClick:()=>{handleBtnNum('6')}, color: 'default'},
    {text: '7', onClick:()=>{handleBtnNum('7')}, color: 'default'},
    {text: '8', onClick:()=>{handleBtnNum('8')}, color: 'default'},
    {text: '9', onClick:()=>{handleBtnNum('9')}, color: 'default'},
    {text: '0', onClick:()=>{handleBtnNum('0')}, color: 'default'},
    {text: '.', onClick:()=>{handleBtnNum('.')}, color: 'default'},
    {text: '删除', onClick:()=>{handleBtnDel()}, color: 'default'},
    {text: '提交', onClick:()=>{handleSubmit()}, color: 'primary'},
    {text: 'AC', onClick:()=>{reset()}, color: 'default'},
  ]
  const allBtnEls = buttons.map((btn: any) => (
    <span className={styles.btn} key={btn.text} onClick={btn.onClick}>
      <Button block color={btn.color}>
        {btn.text}
      </Button>
    </span>
  ))
  return (
    <div className={styles.numberPad}>
      <div className={styles.msgRow}>
        <span className={styles.dateBox}>
          <CalendarSvg/>
          <span>
            <span onClick={()=>setShowCalendar(true)}>{ padForm.date }</span>
            <DatePicker
              title='时间选择'
              visible={showCalendar}
              onClose={() => {
                setShowCalendar(false)
              }}
              defaultValue={defaultDate}
              onConfirm={handleDateConfirm}
            />
          </span>
        </span>
        <span className={styles.amountBox}>{ padForm.amount }</span>
      </div>
      <div className={styles.numPad}>
        {allBtnEls}
      </div>
    </div>
  )
}